<template>
	<view class="u-abso promotion-wrap" :class="activityTypeClass[data.type]">
		<view class="price">
			<view class="selling">{{ data.price | formatCurrency }}</view>
		</view>
		<view class="time" v-if="data.running_status == 0">
			<view class="text">距开始仅剩</view>
			<view class="number">
				<u-count-down
					:timestamp="data.start_countdown"
					bg-color=""
					separator-size="20"
					separator-color="#FF6B25"
					font-size="20"
					color="#FF6B25"
					separator="zh"
					:show-days="true"
					:show-hours="false"
					:show-minutes="false"
					:show-seconds="false"
					:hide-zero-day="true"
					class="count-down-days"
				></u-count-down>
				<u-count-down
					:timestamp="data.start_countdown"
					height="36"
					bg-color="#FF6B25"
					separator-size="20"
					separator-color="#FF6B25"
					font-size="20"
					color="#ffffff"
					class="count-down"
					:hide-zero-day="true"
				></u-count-down>
			</view>
		</view>
		<view class="time" v-if="data.running_status == 1">
			<view class="text">距结束仅剩</view>
			<view class="number">
				<u-count-down
					:timestamp="data.end_countdown"
					bg-color=""
					separator-size="20"
					separator-color="#FF6B25"
					font-size="20"
					color="#FF6B25"
					separator="zh"
					:show-days="true"
					:show-hours="false"
					:show-minutes="false"
					:show-seconds="false"
					:hide-zero-day="true"
					class="count-down-days"
				></u-count-down>
				<u-count-down
					:timestamp="data.end_countdown"
					height="36"
					bg-color="#FF6B25"
					separator-size="20"
					separator-color="#FF6B25"
					font-size="20"
					color="#ffffff"
					class="count-down"
					:hide-zero-day="true"
				></u-count-down>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		data: Object,
	},
	data() {
		return {
			activityTypeClass: {
				1: "discount",
				2: "seckill",
				3: "bargaining",
				4: "group",
			},
		}
	},
	methods: {},
	options: { styleIsolation: "shared" },
}
</script>

<style lang="scss" scoped>
// 活动
.promotion-wrap {
	--main-color: #ff6b25;
	left: 0;
	bottom: 0;
	width: 750rpx;
	height: 90rpx;
	display: flex;
	align-items: center;
	background-image: var(--bg-img);
	background-size: cover;
	background-repeat: no-repeat;
	.price {
		margin-left: 107rpx;
		.selling {
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
	.time {
		margin-left: auto;
		padding-right: 36rpx;
		.text {
			font-size: 20rpx;
			font-weight: 400;
			color: var(--main-color);
			text-align: center;
			margin-bottom: 6rpx;
		}
		.number {
			display: flex;
			align-items: center;
			/deep/.count-down-days {
				margin-right: 14rpx;
				.u-countdown-item,
				.u-countdown-colon {
					padding: 0;
				}
			}
			/deep/.count-down {
				.u-countdown-item:nth-child(1),
				.u-countdown-colon:nth-child(2) {
					display: none;
				}
			}
		}
	}
}
.promotion-wrap.discount {
	--bg-img: url("@/pageCourse/static/images/details_discount_bg.png");
}
.promotion-wrap.seckill {
	--bg-img: url("@/pageCourse/static/images/detials_seckill_bg.png");
}
.promotion-wrap.bargaining {
	--bg-img: url("@/pageCourse/static/images/detials_kanjia_bg.png");
}
.promotion-wrap.group {
	--bg-img: url("@/pageCourse/static/images/detials_pintuan_bg.png");
}
</style>
